<template>
<!-- 体检预约表单的提交  归属预约会诊 组件-->
    <div>
        <div class="elFrom">
            <el-form :model="numberValidateForm" :rules="rules" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
                <svg class="icon myIcome" aria-hidden="true" style="position: absolute;top: 69px;left: 45px;">
                  <use :xlink:href="tijian"></use>
                </svg><el-form-item label="体检人信息"></el-form-item>
                <el-form-item label="体检人" prop="besName">
                    <el-input type="text" v-model="numberValidateForm.besName" autocomplete="off" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-divider></el-divider>
                <el-form-item label="性别" prop="besGender">
                    <el-radio-group size="medium" v-model="numberValidateForm.besGender">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-divider></el-divider>
                <el-form-item label="手机号" prop="besPhone">
                    <el-input type="text" v-model="numberValidateForm.besPhone" autocomplete="off" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-divider></el-divider>
                <el-form-item label="身份证" prop="besIdentity">
                    <el-input type="text" v-model="numberValidateForm.besIdentity" autocomplete="off" placeholder="请输入身份证"></el-input>
                </el-form-item>
                <el-divider></el-divider>
                <el-form-item>
                </el-form-item>
                <el-form-item label="出生日期" prop="besBirthday">
                  <el-date-picker v-model="numberValidateForm.besBirthday" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
                  </el-date-picker>
                    <!-- <el-input type="date" v-model="numberValidateForm.besBirthday" autocomplete="off"></el-input> -->
                </el-form-item>
                <el-divider></el-divider>
                <el-form-item label="婚否" prop="besWedlock">
                <el-radio-group size="medium"  v-model="numberValidateForm.besWedlock">
                        <el-radio label="已婚"></el-radio>
                        <el-radio label="未婚"></el-radio>
                    </el-radio-group>
                </el-form-item>
                 <el-divider></el-divider>
                 <el-form-item label="体检日期选择" prop="besTime">
                   <div @click="dj">
                    <el-input type="text" v-model="numberValidateForm.besTime" autocomplete="off" placeholder="请选择预约时间"></el-input>
                   </div>
                </el-form-item>
                <el-divider></el-divider>
                  <button style="width:1560.77px;height:150px;background-color:#0088dc;color:white;font-size:20px;border:white;position: absolute;top:1150px" @click="editsetroute">
                    提交预约
                  </button>
            </el-form>
            <el-dialog title="预约体检日期" :visible.sync="dialogVisible" width="70%">
            <el-calendar v-model="TimeValue">
              <template slot="dateCell" slot-scope="{data}">
                <p :class="data.isSelected ? 'is-selected' : ''">
                            {{ data.day.split('-').slice(2).join('-') }} {{ data.isSelected ? '✔️' : ''}}
                </p>
                 <div @click="chengedate(data.day)" style="width:100%;height:100%;">
                  <div v-for="item in dateType" :key="item.sinDayAppId" @click="change(item.sinDayAppCanapp, item.sinDayAppApp,data.day)" style="width:70%;height:5%">
                      <div v-if="data.day === item.sinDayAppDate && item.sinDayAppApp != item.sinDayAppCanapp ? true:false">
                        <span>可预约:{{item.sinDayAppCanapp}}</span>
                      </div>
                      <div v-if="data.day === item.sinDayAppDate && item.sinDayAppApp === item.sinDayAppCanapp ? true:false">
                          <span style="color:red">预约已满</span>
                      </div>
                  </div>
                </div>
              </template>
            </el-calendar>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="DateBirtg">确 定</el-button>
            </span>
        </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Examination',
  data () {
    return {
      numberValidateForm: {
        besName: '',
        besGender: '',
        besPhone: '',
        besIdentity: '',
        besBirthday: '',
        besWedlock: '',
        besTime: '',
        besIspay: 0,
        besSmId: this.$route.params.num,
        besTypeId: this.$route.params.num,
        besState: 1,
        besComplete: 0,
        besIsUpload: 0,
        memId: 0
      },
      dateType: [],
      tijian: '#icon-shu',
      dialogVisible: false,
      dateBeak: '',
      TimeValue: '',
      downnowDate: '',
      rules: {
        besName: [
          {required: true, message: '体检人不能为空', trigger: 'blur'}
        ],
        besPhone: [
          {required: true, message: '手机号不能为空', trigger: 'blur'},
          {pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式'}
        ],
        besIdentity: [
          {required: true, message: '身份证不能为空', trigger: 'blur'},
          {pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/, message: '请输入正确的证件号'}
        ]
      }
    }
  },
  methods: {
    // 时间的点击事件
    DateAppointment () {
      this.$axios.post(`/api/ProDateAppointment`).then(result => {
        result.data.forEach((item, index) => {
          this.dateType.push(item)
        })
      })
    },

    // 日历的触发事件
    dj () {
      this.dialogVisible = true
    },
    chengedate (val) {
      let date = new Date(val)
      let cuo = date.getTime()
      let now = Date.now() - 86400000
      if (cuo < now) {
        alert('预约日期不能小于当前日期')
        this.dateBeak = ''
        this.numberValidateForm.besTime = ''
      } else {
        this.dateBeak = val
      }
    },
    // 判断人数
    change (num1, num2, day1) {
      let flag = false
      this.dateType.forEach(e => {
        if (e.sinDayAppDate === day1) {
          flag = true
        }
      })
      if (flag) {
        if (num2 === num1) {
          this.$message.error('预约人数已满,请重新选择预约时间')
          this.dateBeak = ''
          this.numberValidateForm.besTime = ''
        } else {
          this.numberValidateForm.besTime = day1
        }
      } else {
        this.dateBeak = ''
        this.numberValidateForm.besTime = ''
        this.$message.error('请选择有预约人数的日期')
      }
    },
    // 对话框的关闭事件
    DateBirtg () {
      this.dialogVisible = false
    },
    // 是否支付
    editsetroute () {
      if (this.numberValidateForm.besName !== '' && this.numberValidateForm.besPhone !== '' && this.numberValidateForm.besIdentity !== '' && this.dateBeak !== '') {
        if (confirm('是否支付')) {
          this.$axios.post(`/api/ProBeak/${this.dateBeak}`, this.numberValidateForm).then(result => {
            this.$message({
              type: 'success',
              message: '预约成功'
            })
            this.$router.push('/report')
          })
        } else {
          this.$message.error('预约失败')
        }
      } else {
        this.$message.error('请填写完预约信息,在提交')
      }
    }
  },
  created () {
    this.DateAppointment()
    let a = sessionStorage.getItem('user')
    let user = JSON.parse(a)
    this.numberValidateForm.memId = user.memId
  }
}
</script>

<style>
.el-input__inner{margin-left: 150px;width: 1180px;height: 60px;border: 0px;}
.el-form-item{margin-top: 60px;margin-left: 50px}
.el-radio{margin-left: 150px;}
.elFrom{position: absolute;}
.icon{width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
.myIcome{font-size: 20px;}
</style>
